<template>
    <div class="CategoryMovie">
        <div id="div1">
            <meta name="referrer" content="no-referrer"/>
            <Header/>
            <br>
            <p style="color: red">
            <h2><b>共{{movie_total}}部</b></h2></p>
            <div v-for="movie in movie_list"
                 style="display: inline-block;margin-left: 100px;float: left;width: 100px;height: 350px;margin-bottom: 20px">
                <span>
                    <router-link :to="'/detail/'+movie.id">
                        <img :src="movie.movie_img" height="250px"
                             :alt="movie.name">
                        <h6><b>{{movie.name}}</b></h6>
                    </router-link>
                </span>
            </div>
        </div>
        <div class="course_pagination block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="filter.page"
                    :page-sizes="[10]"
                    :page-size="filter.size"
                    layout="prev, pager, next"
                    :total="movie_total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";

    export default {
        name: "CategoryMovie",
        data() {
            return {
                movie_list: [],
                category_id: 0,
                movie_total: 0,
                filter: {
                    movie_category: 0,
                    ordering: "-orders",
                    size: 14,
                    page: 1,
                }
            }
        },
        components: {
            Header
        },
        created() {
            this.get_category_id();
            this.get_movies1();
        },
        watch: {
            //当你监听的数据发生变化，就会执行函数
            "filter.movie_category": function () {
                this.filter.page = 1;
                this.get_movies1();
            },
            "filter.ordering": function () {
                this.get_movies1();
            },
            "filter.size": function () {
                this.get_movies1();
            },
            "filter.page": function () {
                this.get_movies1();
            }
        },
        methods: {
            handleSizeChange(val) {
                // 每页数据量发生变化时执行的方法
                this.filter.page = 1;
                this.filter.size = val;
            },
            handleCurrentChange(val) {
                // 页码发生变化时执行的方法
                this.filter.page = val;
            },
            get_category_id() {
                this.category_id = this.$route.query.movie_category;
            },
            get_movies1() {
                let filters = {
                    ordering: this.filter.ordering, // 排序
                };
                // 判决是否进行分类课程的展示
                if (this.category_id > 0) {
                    filters.movie_category = this.category_id;
                }

                // 设置单页数据量
                if (this.filter.size > 0) {
                    filters.size = this.filter.size;
                } else {
                    filters.size = 20;
                }

                // 设置当前页码
                if (this.filter.page > 1) {
                    filters.page = this.filter.page;
                } else {
                    filters.page = 1;
                }
                // 获取电影列表信息
                this.$axios.get(`${this.$settings.base_url}/yingshi/movie/`, {
                    params: filters
                }).then(response => {
                    console.log(response.data['results']);
                    this.movie_list = response.data['results'];
                    this.movie_total = response.data.count;

                }).catch(() => {
                    this.$message({
                        message: "获取课程信息有误，请联系客服工作人员"
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .course_pagination {
        position: absolute;
        top: 835px;
        left: 600px;
    }

</style>